<!--
 * @Description:
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-09-20 09:54:06
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '村情上报',
  },
}
</route>
<template>
  <view
    class="bg-white overflow-hidden pt-4 px-4 w-100% h-100% box-border overflow-hidden"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
  >
    <view
      v-for="(item, index) in menuList"
      class="pos-relative"
      :key="index"
      @click="handleSkip(index + 1)"
    >
      <img class="w-100% h-160rpx" :src="item.src" />
      <view class="pos-absolute top-0 left-0 gap-8px z-10 flex flex-col pt-36rpx px-40rpx">
        <text class="font-600 text-16px">{{ item.title }}</text>
        <text class="text-12px text-#9FA2AC">{{ item.msg }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import menu1 from '@/static/VillageCondition/menu1.png'
import menu2 from '@/static/VillageCondition/menu2.png'
import menu3 from '@/static/VillageCondition/menu3.png'
import menu4 from '@/static/VillageCondition/menu4.png'
import menu5 from '@/static/VillageCondition/menu5.png'
import menu6 from '@/static/VillageCondition/menu6.png'
import { useIsLogined } from '@/hooks/useIsLogined'
import { useUserStore } from '@/store'
const userStore = useUserStore()
const { updateStatus } = useIsLogined()
const menuList = [
  {
    title: '矛盾调解',
    msg: '矛盾调解在乡村，邻里和睦一家亲',
    src: menu1,
  },
  {
    title: '环境卫生',
    msg: '村庄环境你我有责，反馈卫生情况，共建美丽家园',
    src: menu2,
  },
  {
    title: '治安状况',
    msg: '治安情况要知晓，村民馈很重要，乡村安全共创造',
    src: menu3,
  },
  {
    title: '干部作风',
    msg: '村民监督不缺席，反馈十部作风正风气',
    src: menu4,
  },
  {
    title: '农业生产',
    msg: '村民们，积极反馈农业生产，携手共促乡村丰收',
    src: menu5,
  },
  {
    title: '其他',
    msg: '反馈村情一小步，乡村进步一大步',
    src: menu6,
  },
]
defineOptions({
  name: 'VillageCondition',
})
const jurisdiction = computed(() => userStore.userInfo.type !== 'tourist')
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const handleSkip = (type) => {
  if (jurisdiction.value) {
    uni.navigateTo({ url: `/pages/VillageCondition/VillageConditionSub?type=${type}` })
  } else {
    uni.showToast({
      title: '暂无权限',
      icon: 'error',
      duration: 1000,
    })
  }
}

// 测试 uni API 自动引入
onLoad(() => {})
onShow(() => {
  updateStatus()
})
</script>

<style>
.main-title-color {
  color: #d14328;
}
</style>
